<template>
	<view class="main">
		<header-vue bgColor="transparent" :back="true"></header-vue>
		<view class="margin32">
			<view class="title">选择您的身份</view>
			<view v-for="(item, index) in list" class="flex between list-item white-box" @click="radioIndex = index">
				<image :src="item.icon"></image>
				<view style="flex: 1;height: 100%;" class="flex center between">
					<view>{{item.name}}</view>
					<view class="flex between font28" style="margin-right: 28rpx;" :class="{active: radioIndex == index}">
						<view class="flex radio">
							<i class="iconfont icon-duihao" v-if="radioIndex == index"></i>
						</view>
					</view>
				</view>
			</view>
			<view class="btn flex center" @click="goPage()">确认</view>
		</view>
	</view>
</template>

<script>
	import headerVue from '../../components/header.vue';

	export default {
		data() {
			return {
				radioIndex: 0,
				list: [{
						name: '服务商家',
						icon: '/static/mine/sf2.png',
						url: '',
					},
					{
						name: '商场商家',
						icon: '/static/mine/sf1.png',
						url: ''
					},
				]
			}
		},
		components: {
			headerVue
		},
		methods: {
			goPage() {
				uni.navigateTo({
					url: `/views/mine/addSc?name=${this.radioIndex}`,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background: linear-gradient(180deg, #B5CFFF 0%, rgba(246, 249, 255, 0.2) 30%, #F6F9FF 100%);
		height: 100vh;
	}
	
	.margin32 {
		margin: 0 32rpx;
	}

	.title {
		font-weight: 500;
		font-size: 44rpx;
		color: #333333;
		margin: 40rpx;
	}
	
	.white-box {
		width: 100%;
		height: 200rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.1);
		border-radius: 28rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		margin-bottom: 60rpx;
		
		image {
			width: 136rpx;
			height: 136rpx;
			margin-right: 52rpx;
		}
	}
	
	.btn {
		height: 80rpx;
		margin: 160rpx 32rpx 0;
		background: linear-gradient( 90deg, #0785CF 0%, #25A4EF 100%);
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7,133,207,0.1);
		border-radius: 60rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
	}
	.radio {
		width: 26rpx;
		height: 26rpx;
		border-radius: 50%;
		border: 1rpx solid $uni-color-primary;
		margin-right: 8rpx;
	}
	
	.active {
		color: $uni-text-color;
	
		.radio {
			background: $uni-color-primary;
			color: $uni-text-color-inverse;
		}
	}
</style>